<template>
  <div id="slide">
    <div class="slidebox"></div>
    <el-menu
      class="el-menu-vertical-demo"
      background-color="transparent"
      text-color="#fff"
      router
      :unique-opened="true"
      active-text-color="#409eff"
      @select="clearSess"
    >
      <template v-for="item in data">
        <el-submenu :index="item.index" :key="item.index">
          <template slot="title">
            <span class="slide-title">{{item.title}}</span>
          </template>
          <el-menu-item
            v-for="(subItem,i) in item.subs"
            :key="i"
            :index="subItem.index"
          >{{subItem.title}}</el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "slide",
  data() {
    return {
      data: [
        {
          index: "0",
          title: "工作台",
          subs: [
            {
              index: "/work",
              title: "个人工作台"
            }
          ]
        },
        {
          index: "1",
          title: "指标管理",
          subs: [
            {
              index: "/earlywarning",
              title: "指标预警"
            },
            {
              index: "/targetQuery",
              title: "指标查阅"
            },
            {
              index: "/earlywarningSet",
              title: "指标预警设置"
            }
          ]
        },
        {
          index: "2",
          title: "操作风险管控",
          subs: [
            {
              index: "/transaction",
              title: "资产交易申请"
            },
            {
              index: "/BondsMaintain",
              title: "债券资料维护"
            },
            {
              index: "/FinancialMaintenance",
              title: "理财产品资料维护"
            },
            {
              index: "/Counterparty",
              title: "交易对手库"
            },
            {
              index: "/OrganizationManagement",
              title: "机构账户管理"
            },
            {
              index: "/TradeAccount",
              title: "同业账户管理"
            },
            {
              index: "/TransactionRecord",
              title: "交易申请记录查阅"
            },
            {
              index: "/ProvincialControl",
              title: "全省宏观管控设置"
            },
            {
              index: "/controlBank",
              title: "行社交易管控设置"
            }
          ]
        },
        {
          index: "3",
          title: "异常业务管理",
          subs: [
            {
              index: "/abnormal",
              title: "异常业务预警"
            }
          ]
        },
        {
          index: "4",
          title: "实用工具",
          subs: [
            {
              index: "/pressure",
              title: "流动性风险压力测试"
            }
          ]
        },
        {
          index: "5",
          title: "统计分析",
          subs: [
            {
              index: "/Assets",
              title: "持有资产登记簿"
            }
          ]
        },
        {
          index: "6",
          title: "系统管理",
          subs: [
            {
              index: "/Administration",
              title: "用户管理"
            },
            {
              index: "/jurisdiction",
              title: "栏目权限管理"
            },
            {
              index: "/organizational",
              title: "组织架构管理"
            },
            {
              index: "/Institutional",
              title: "机构信息维护"
            }
          ]
        }
      ]
    };
  },
  created() {
    // this.quanxian();
  },
  methods: {
    quanxian() {
      let userstr = sessionStorage.getItem("user");
      let user = JSON.parse(userstr);
      let menuarr = user.menuList;
      // 标题匹配的数组
      let parentarr = [];
      menuarr.forEach((item, index) => {
        // 找到标题匹配的对象
        let pipei = this.data.find((ele, j) => {
          return item.name == ele.title;
        });
        parentarr.push(pipei);
      });
      let tempparent = JSON.stringify(parentarr);
      let parentarrCopy = JSON.parse(tempparent);
      parentarrCopy.forEach((item, index) => {
        // 删除数组子菜单的所有数据
        item.subs.splice(0, item.subs.length);
      });
      menuarr.forEach((item, index) => {
        if (item.list != 0) {
          item.list.forEach((ele, j) => {
            let obj = parentarr[index].subs.find((pitem, pindex) => {
              return pitem.title == ele.cName;
            });
            parentarrCopy[index].subs.push(obj);
          });
        }
      });
      this.data = parentarrCopy;
    },
    clearSess() {
        let user = sessionStorage.getItem('user')
        let token = sessionStorage.getItem('token')
        sessionStorage.clear()
        sessionStorage.setItem('user', user)
        sessionStorage.setItem('token', token)
      }
  }
};
</script>

<style lang="scss">
#slide {
  position: fixed;
  width: 200px;
  padding-right: 20px;
  top: 60px;
  left: 0;
  bottom: 0;
  background-color: #353738;
  background: linear-gradient(#7091a0, #14181e);
  overflow-y: auto;
  overflow-x: hidden;
  .el-menu {
    width: 200px;
    .slide-title {
      font-size: 16px;
      color: #6ab6fb;
    }
  }
  .el-submenu__title:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
}
</style>
